<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Data Tables</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" th:href="@{/plugins/bootstrap/css/bootstrap.min.css}">
  <!-- Font Awesome -->
  <link rel="stylesheet" th:href="@{/dist/css/font-awesome.min.css}">
  <!-- Ionicons -->
  <link rel="stylesheet" th:href="@{/dist/css/ionicons.min.css}">
  <link rel="stylesheet" th:href="@{/css/common.css}">
  <!-- DataTables -->
  <link rel="stylesheet" th:href="@{/plugins/bootstrap-table/css/bootstrap-table.min.css}">
  <!-- Theme style -->
  <link rel="stylesheet" th:href="@{/dist/css/AdminLTE.min.css}">
   <link th:href="@{/css/animate.css}" rel="stylesheet">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" th:href="@{/dist/css/skins/_all-skins.min.css}">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="no-skin">
<div class="wrapper">
  <div class="content-wrapper animated fadeInRight">
    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
         <div class="box-header">
              <h3 class="box-title">用户列表</h3>
            </div> 
            <div class="box-body">
			    <div style="margin: 5px 0px 2px 0px;padding: 5px 4px;background: #e7eaec;border-radius: 4px" >
                        <button class="btn btn-success  btn-sm" type="button" onclick="addUser()"><i class="fa fa-plus"></i> <span class="bold">新增</span></button>
                 		<button class="btn btn-danger  btn-sm" type="button" onclick="deleteUser()"><i class="fa fa-trash-o"></i> <span class="bold">删除</span</button>
	           	<!-- 	<shiro:hasPermission name="sys:user:add">
                         		<button class="btn btn-success  btn-sm" type="button" onclick="addUser()"><i class="fa fa-plus"></i> <span class="bold">新增</span></button>
               		</shiro:hasPermission>
                	<shiro:hasPermission name="sys:user:update">
                 		<button class="btn btn-info btn-sm" type="button" onclick="editUser()"><i class="fa fa-paste"></i> <span class="bold">编辑</span></button>
               		</shiro:hasPermission>
                	<shiro:hasPermission name="sys:user:roleToUser">
                 		<button class="btn btn-warning btn-sm" type="button" onclick="roleToUser()"><i class="fa fa-odnoklassniki-square"></i> <span class="bold">授权</span> </button>
               		</shiro:hasPermission>
                	<shiro:hasPermission name="sys:user:delete">
                 		<button class="btn btn-danger  btn-sm" type="button" onclick="deleteUser()"><i class="fa fa-trash-o"></i> <span class="bold">删除</span</button>
               		</shiro:hasPermission> -->
	            </div>
              	<table id="userList" data-height="auto" data-mobile-responsive="true"></table>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  <!-- /.content-wrapper -->
   <div class="control-sidebar-bg"></div>
</div>

<div class="modal fade" id="addUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" style="margin-top:10%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                            &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabels">
                      	  添加用户
                    </h4>
                </div>
	                <form class="form-horizontal" action="/sysUser/addSysUser" method="post" id="addUserForm"  style="margin-top:10px">
		                <div class="modal-body">
			                    <div class="form-group">
			                    	    <label  class="col-sm-3 control-label">用户名称:</label>
					                    <div class="col-sm-6">
					                      	 <input type="text" class="form-control" id="userName" name="userName" placeholder="用户名称" value="" required="required"/>
					                    </div>
			                    </div>
			                    <div class="form-group">
			                    	    <label  class="col-sm-3 control-label">年龄:</label>
					                    <div class="col-sm-6">
					                      	 <input type="text" class="form-control" id="age" name="age" placeholder="年龄" value=""  required="required"/>
					                    </div>
			                    </div>
			                    <div class="form-group">
			                    	    <label  class="col-sm-3 control-label">密码:</label>
					                    <div class="col-sm-6">
					                      	 <input type="password" class="form-control" id="password" name="password" placeholder="密码" value=""  required="required"/>
					                    </div>
			                    </div>
			                    <div class="form-group">
			                    	    <label  class="col-sm-3 control-label">状态:</label>
					                    <div class="col-sm-6">
					                      	<select id="status" name="status" class="form-control m-b"  required="required">
												<option value="">--请选择--</option>
												<option value="1">正常</option>
												<option value="2">冻结</option>
											</select>
					                    </div>
			                    </div>
			             </div>
			             <div class="modal-footer">
		                     <button type="button" class="btn btn-default"  data-dismiss="modal">关闭</button>
		                     <button  class="btn btn-primary" type="submit">确定</button>
		                 </div>
	                </form>
            </div>
        </div>
    </div>
    
    <div class="modal fade" id="editUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog"  style="margin-top:10%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                            &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabels">
                      	编辑用户
                    </h4>
                </div>
	            <form class="form-horizontal" action="/sysUser/editSysUser" method="post" id="editUserForm"  style="margin-top:10px">
	                <div class="modal-body">
		                	<input type="hidden" name="id" id="updateId">  
		                    <div class="form-group">
		                    	    <label  class="col-sm-3 control-label">用户名称:</label>
				                    <div class="col-sm-6">
				                      	 <input type="text" class="form-control" id="updateUserName" name="userName" placeholder="用户名称" value=""  required="required"/>
				                    </div>
		                    </div>
		                    <div class="form-group">
		                    	    <label  class="col-sm-3 control-label">年龄:</label>
				                    <div class="col-sm-6">
				                      	 <input type="text" class="form-control" id="updateAge" name="age" placeholder="年龄" value=""  required="required"/>
				                    </div>
		                    </div>
		                    <div class="form-group">
		                    	    <label  class="col-sm-3 control-label">密码:</label>
				                    <div class="col-sm-6">
				                      	 <input type="password" class="form-control" id="updatePassword" name="password" placeholder="密码" value=""  required="required"/>
				                    </div>
		                    </div>
		                    <div class="form-group">
		                    	    <label  class="col-sm-3 control-label">状态:</label>
				                    <div class="col-sm-6">
				                      	<select id="updateStatus" name="status" class="form-control m-b"  required="required">
											<option value="">--请选择--</option>
											<option value="1">正常</option>
											<option value="2">冻结</option>
										</select>
				                    </div>
		                    </div>
		            </div>    
	                <div class="modal-footer">
	                    <button type="button" class="btn btn-default"  data-dismiss="modal">关闭</button>
	                    <button  class="btn btn-primary" type="submit">确定</button>
	                </div>
	            </form>
            </div>
        </div>
    </div>
    
    <div class="modal fade" id="detailUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" >
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                            &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabels">
                      	用户详情
                    </h4>
                </div>
	            <form class="form-horizontal" action="" method="post" id="detailUserForm"  style="margin-top:10px">
	                <div class="modal-body">
		                    <div class="form-group">
		                    	    <label  class="col-sm-3 control-label">用户名称:</label>
				                    <div class="col-sm-6">
				                      	 <input type="text" class="form-control" id="detailUserName" name="userName" placeholder="用户名称" value="" disabled="disabled"/>
				                    </div>
		                    </div>
		                    <div class="form-group">
		                    	    <label  class="col-sm-3 control-label">年龄:</label>
				                    <div class="col-sm-6">
				                      	 <input type="text" class="form-control" id="detailAge" name="age" placeholder="年龄" value="" disabled="disabled"/>
				                    </div>
		                    </div>
		                    <div class="form-group">
		                    	    <label  class="col-sm-3 control-label">密码:</label>
				                    <div class="col-sm-6">
				                      	 <input type="password" class="form-control" id="detailPassword" name="password" placeholder="密码" value="" disabled="disabled"/>
				                    </div>
		                    </div>
		                    <div class="form-group">
		                    	    <label  class="col-sm-3 control-label">状态:</label>
				                    <div class="col-sm-6">
				                      	<select id="detailStatus" name="status" class="form-control m-b"  disabled="disabled">
											<option value="">--请选择--</option>
											<option value="1">正常</option>
											<option value="2">冻结</option>
										</select>
				                    </div>
		                    </div>
		            </div>    
		            <div class="modal-footer">
		                    <button type="button" class="btn btn-default"  data-dismiss="modal">关闭</button>
		            </div>
	            </form>
            </div>
        </div>
    </div>
    
     <div class="modal fade" id="roleToUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" >
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                            &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabels">
                      	角色列表
                    </h4>
                </div>
             	 <div>
				    <!-- Main content -->
				    <section class="content">
				      <div class="row">
				        <div class="col-xs-12">
				             <table id="roleList" data-height="auto" data-mobile-responsive="true"></table> 
				        </div>
				      </div>
				    </section>
				  </div>
	            <form class="form-horizontal" action="/sysUserRole/addUserRole" method="post" id="roleToUserForm"  onsubmit="return setRoleToUser()">
	            	<input id="userId" name="userId" type="hidden">
	            	<input id="roleId" name="roleIds"  type="hidden">
                	<div class="modal-footer">
	                    <button type="button" class="btn btn-default"  data-dismiss="modal">关闭</button>
	                    <button  class="btn btn-primary" type="submit">确定</button>
	                </div>
	            </form>    	
            </div>
        </div>
    </div>


<!-- ./wrapper -->

<!-- jQuery 2.2.3 -->
<script th:src="@{/plugins/jQuery/jquery-2.2.3.min.js}"></script>
<script th:src="@{/plugins/layer/layer.js}"></script>
<!-- Bootstrap 3.3.6 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.min.js}"></script>
<!-- DataTables -->
<script th:src="@{/plugins/bootstrap-table/js/bootstrap-table.min.js}"></script>
<script th:src="@{/plugins/bootstrap-table/js/extensions/mobile/bootstrap-table-mobile.min.js}"></script>
<script th:src="@{/plugins/bootstrap-table/js/locale/bootstrap-table-zh-CN.min.js}"></script>
<!-- SlimScroll -->
<script th:src="@{/plugins/slimScroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{/plugins/fastclick/fastclick.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/dist/js/app.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/dist/js/demo.js}"></script>
<script th:src="@{/js/user/userList.js}"></script>
<script th:src="@{/js/common/dateutil.js}"></script>
<!-- page script -->
<script>
</script>
</body>
</html>
